<template>
<div>
<el-tree
  :data="treeData"
  :props="defaultProps"
  show-checkbox
  node-key="id"
  default-expand-all
  :expand-on-click-node="false"
  :render-content="renderContent">
</el-tree>
</div>
</template>
<script>
  let id = 1000;

  export default {
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    props:['treeData'],
    methods: {
       
             append:function(store, data) {  
                store.append({ id: id++, label: 'testtest', children: [] }, data);  
            },  
            remove:function(store, data) {  
                store.remove(data);  
            },  
            renderContent:function(createElement, { node, data, store }) {  
                var self = this;  
                return createElement('span', [  
                    createElement('span', node.label),  
                    createElement('span', {attrs:{  
                        style:"float: right; margin-right: 20px"  
                    }},[  
                        createElement('el-button',{attrs:{  
                            size:"mini"  
                        },on:{  
                            click:function() {  
                                console.info("点击了节点" + data.id + "的添加按钮");  
                                store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);  
                            }  
                        }},"添加"),  
                        createElement('el-button',{attrs:{  
                            size:"mini"  
                        },on:{  
                            click:function() {  
                                console.info("点击了节点" + data.id + "的删除按钮");  
                                store.remove(data);  
                            }  
                        }},"删除"),  
                    ]),  
                ]);  
            } 
    }
  };
</script>